<template>
  <div id="app">
    <button @click="show1=true">弹框1</button>
    <button @click="show2=true">弹框2</button>
    <button>弹框3</button>
    <Message-box v-if="show1" @close="show1=false" title="这是弹窗1">
      <template v-slot:discon>
        <h3>这是内容插槽</h3>
      </template>
    </Message-box>
    <Message-box v-if="show2" @close="show2=false" title="这是弹窗2">
      <template v-slot:distitle>
        <h4>这是一个标题插槽</h4>
      </template>
    </Message-box>

  </div>
</template>

<script>
import MessageBox from './components/messageBox.vue'
export default {
  data () {
    return {
      show1: false,
      show2: false
    }
  },
  components: { // 激活组件
    MessageBox
  }
}
</script>

<style>
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
}
html,body, .app{
  width: 100%;
  height: 100%;
}

</style>
